<template>
  <div class="article-category">
    <div class="category-handler">
      <a-button type="primary" @click="addCategoryUi">添加类型</a-button>
    </div>
    <a-table class="category-table" :columns="state.categoryColumns" :data-source="state.categories" rowKey="categoryId" :pagination="false">
      <template #action="{ record, index }">
        <span>
          <a href="javascript:void(0)" @click="renameCategoryUi(index)">重命名</a>
          <a-divider type="vertical" />
          <a-popconfirm
            :title="`删除文章类型【${record.categoryName}】？`"
            @confirm="deleteCategory(record.categoryId)"
          >
            <a href="javascript:void(0)">删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>

    <a-modal v-model:visible="state.renameCategory.model" :title="state.renameCategory.categoryName" @ok="renameCategory">
      <p>重命名为：</p>
      <a-input v-model:value="state.renameCategory.newCategoryName" placeholder="输入新的类型名称" />
    </a-modal>

    <a-modal v-model:visible="state.addCategory.model" title="添加文章类型" @ok="addCategory">
      <p>类型名称：</p>
      <a-input v-model:value="state.addCategory.categoryName" placeholder="输入类型名称" />
    </a-modal>
  </div>
</template>
<script>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import {defineComponent, reactive} from 'vue';
import Axios from '../../utils/http-util';
import BackendUrl from '../../constants/backend-url';

const state = reactive({
  categoryColumns: [
    {
      title: '类型名称',
      dataIndex: 'categoryName',
    },
    {
      title: '操作',
      slots: { customRender: 'action' }
    }
  ],
  categories: [],
  renameCategory: {
    model: false,
    categoryId: '',
    categoryName: '',
    newCategoryName: ''
  },
  addCategory: {
    model: false,
    categoryName: ''
  }
});

const initRenameCategoryData = () => {
  state.renameCategory.model = false;
  state.renameCategory.categoryId = '';
  state.renameCategory.categoryName = '';
  state.renameCategory.newCategoryName = '';
}

const initAddCategoryData = () => {
  state.addCategory.model = false;
  state.addCategory.categoryName = '';
};

const renameCategoryUi = (index) => {
  console.log('rename category, index：', index);
  state.renameCategory.categoryId = state.categories[index].categoryId;
  state.renameCategory.categoryName = state.categories[index].categoryName;
  state.renameCategory.model = true;
};

const renameCategory = () => {
  console.log('rename category：', state.renameCategory);
  let categoryData = { categoryName: state.renameCategory.newCategoryName };
  Axios.put(BackendUrl.blog.category.UPDATE_CATEGORY.replace('{{categoryId}}', state.renameCategory.categoryId), categoryData).then(res => {
    initRenameCategoryData();
    state.renameCategory.model = false;

    getCategories();
  });
}

const deleteCategory = (categoryId) => {
  console.log('delete category', categoryId);
  Axios.delete(BackendUrl.blog.category.DELETE_CATEGORY.replace('{{categoryId}}', categoryId)).then(res => {
    getCategories();
  });
};

const addCategoryUi = () => {
  state.addCategory.model = true;
};

const addCategory = () => {
  let categoryData = { categoryName: state.addCategory.categoryName };
  Axios.post(BackendUrl.blog.category.ADD_CATEGORY, categoryData).then(res => {
    initAddCategoryData();
    state.addCategory.model = false;

    getCategories();
  });
};

const getCategories = () => {
  Axios.get(BackendUrl.blog.category.GET_ALL_CATEGORY).then(res => {
    state.categories = res.data;
  });
}

export default defineComponent({
  setup() {
    getCategories();

    return {
      state,

      renameCategoryUi,
      renameCategory,
      deleteCategory,
      addCategoryUi,
      addCategory
    };
  },
  components: {
    SmileOutlined,
    DownOutlined
  }
});
</script>

<style scoped lang="scss">
.article-category {
  .category-handler {
    text-align: left;
  }
  .category-table {
    margin-top: 15px;
  }
}
</style>
